<template>
  <el-header>
    <div class="header-content">
      <el-row justify="space-between" align="middle">
        <el-col :span="6">
          <el-button type="text" class="logo">my blog</el-button>
        </el-col>
        <el-col :span="12" class="nav-links">
          <el-menu mode="horizontal" :default-active="activeMenu">
            <el-menu-item :index="item.id" v-for="(item,index) in list" @click="toPath(item)"
                          :key="index"
            >{{item.name}}</el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="6">
          <div class="info">
            <span>{{userInfo.realname}}</span>
            <el-avatar :src="userInfo.avatar"></el-avatar>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-header>
</template>
<script>
import {mapState,mapActions} from "vuex"
export default {
  name: "Header",
  data() {
    return {
      activeMenu: '1',
      list:[
        {
          id:'1',
          name:'首页',
          path:'/'
        },
        {
          id:'2',
          name:'我的',
          path:'/my'
        },
        {
          id:'3',
          name:'日志',
          path:'/blog'
        },
      ]
    }
  },
  computed: {
    // 使用 mapState 映射 Vuex store 中的状态到组件的计算属性
    ...mapState({
      userInfo: state => state.user.userInfo,
    })
  },
  created() {
    console.log(this.userInfo,666)
  },
  methods:{
    toPath(item){
      let path  = this.$route.path
      if(path == item.path)return
      this.$router.push(item.path)
    }
  }
}
</script>
<style scoped lang="less">
.header-content {
  padding: 0 20px;
  background-color: @main-color;
}

.logo {
  font-size: 24px;
  color: white;
  font-weight: bold;
}

.nav-links {
  text-align: center;
}

.el-header{
  padding: 0 !important;
}
.el-menu-item{
  height: 50px !important;
  color: #000000 !important;
}
.el-menu{
  background-color: @main-color !important;
  border: none !important;

}
.el-menu-item.is-active{
  color: #ffffff !important;
  border-bottom: 2px solid #05dee3;
  background-color: @main-color !important;
}
.el-menu-item:hover{
  background: none !important;
}

.info{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 50px !important;
  gap: 10px;
  >span{
    font-size: 18px;
    color: #ffffff;
  }
}
</style>
